OpenAI Icon Light

8e:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"SWRDataProvider"] 90:T3649,[V0_FILE]typescriptreact:file="components/kokonutui/ai-prompt.tsx" "use client" import type React from "react" import { ArrowRight, Bot, Check, ChevronDown, Paperclip } from "lucide-react" import { useState } from "react" import { Textarea } from "@/components/ui/textarea" import { cn } from "@/lib/utils" import { useAutoResizeTextarea } from "@/hooks/use-auto-resize-textarea" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { motion, AnimatePresence } from "motion/react" const OPENAI_SVG = (

) export default function AI_Prompt() { const [value, setValue] = useState("") const { textareaRef, adjustHeight } = useAutoResizeTextarea({ minHeight: 72, maxHeight: 300, }) const [selectedModel, setSelectedModel] = useState("GPT-4-1 Mini") const AI_MODELS = ["o3-mini", "Gemini 2.5 Flash", "Claude 3.5 Sonnet", "GPT-4-1 Mini", "GPT-4-1"] const MODEL_ICONS: Record = { "o3-mini": OPENAI_SVG, "Gemini 2.5 Flash": ( ), "Claude 3.5 Sonnet": (

), "GPT-4-1 Mini": OPENAI_SVG, "GPT-4-1": OPENAI_SVG, } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() setValue("") adjustHeight(true) } } return (

{
                  setValue(e.target.value)
                  adjustHeight()
                }}
              />
            </div>

<div className="h-14 bg-black/5 dark:bg-white/5 rounded-b-xl flex items-center">
              <div className="absolute left-3 right-3 bottom-3 flex items-center justify-between w-[calc(100%-24px)]">
                <div className="flex items-center gap-2">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button
                        variant="ghost"
                        className="flex items-center gap-1 h-8 pl-1 pr-2 text-xs rounded-md dark:text-white hover:bg-black/10 dark:hover:bg-white/10 focus-visible:ring-1 focus-visible:ring-offset-0 focus-visible:ring-blue-500"
                      >
                        <AnimatePresence mode="wait">
                          <motion.div
                            key={selectedModel}
                            initial={{
                              opacity: 0,
                              y: -5,
                            }}
                            animate={{
                              opacity: 1,
                              y: 0,
                            }}
                            exit={{
                              opacity: 0,
                              y: 5,
                            }}
                            transition={{
                              duration: 0.15,
                            }}
                            className="flex items-center gap-1"
                          >
                            {MODEL_ICONS[selectedModel]}
                            {selectedModel}
                            <ChevronDown className="w-3 h-3 opacity-50" />
                          </motion.div>
                        </AnimatePresence>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                      className={cn(
                        "min-w-[10rem]",
                        "border-black/10 dark:border-white/10",
                        "bg-gradient-to-b from-white via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-800",
                      )}
                    >
                      {AI_MODELS.map((model) => (
                        <DropdownMenuItem
                          key={model}
                          onSelect={() => setSelectedModel(model)}
                          className="flex items-center justify-between gap-2"
                        >
                          <div className="flex items-center gap-2">
                            {MODEL_ICONS[model] || <Bot className="w-4 h-4 opacity-50" />}{" "}
                            {/* Use mapped SVG or fallback */}
                            <span>{model}</span>
                          </div>
                          {selectedModel === model && <Check className="w-4 h-4 text-blue-500" />}
                        </DropdownMenuItem>
                      ))}
                    </DropdownMenuContent>
                  </DropdownMenu>
                  <div className="h-4 w-px bg-black/10 dark:bg-white/10 mx-0.5" />
                  <label
                    className={cn(
                      "rounded-lg p-2 bg-black/5 dark:bg-white/5 cursor-pointer",
                      "hover:bg-black/10 dark:hover:bg-white/10 focus-visible:ring-1 focus-visible:ring-offset-0 focus-visible:ring-blue-500",
                      "text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white",
                    )}
                    aria-label="Attach file"
                  >
                    <input type="file" className="hidden" />
                    <Paperclip className="w-4 h-4 transition-colors" />
                  </label>
                </div>
                <button
                  type="button"
                  className={cn(
                    "rounded-lg p-2 bg-black/5 dark:bg-white/5",
                    "hover:bg-black/10 dark:hover:bg-white/10 focus-visible:ring-1 focus-visible:ring-offset-0 focus-visible:ring-blue-500",
                  )}
                  aria-label="Send message"
                  disabled={!value.trim()}
                >
                  <ArrowRight
                    className={cn(
                      "w-4 h-4 dark:text-white transition-opacity duration-200",
                      value.trim() ? "opacity-100" : "opacity-30",
                    )}
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-auto-resize-textarea.ts"
"use client"

import { useEffect, useRef, useCallback } from "react"

interface UseAutoResizeTextareaProps {
  minHeight: number
  maxHeight?: number
}

export function useAutoResizeTextarea({ minHeight, maxHeight }: UseAutoResizeTextareaProps) {
  const textareaRef = useRef<HTMLTextAreaElement>(null)

const adjustHeight = useCallback(
    (reset?: boolean) => {
      const textarea = textareaRef.current
      if (!textarea) return

if (reset) {
        textarea.style.height = `${minHeight}px`
        return
      }

// Temporarily shrink to get the right scrollHeight
      textarea.style.height = `${minHeight}px`

// Calculate new height
      const newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY))

textarea.style.height = `${newHeight}px`
    },
    [minHeight, maxHeight],
  )

useEffect(() => {
    // Set initial height
    const textarea = textareaRef.current
    if (textarea) {
      textarea.style.height = `${minHeight}px`
    }
  }, [minHeight])

// Adjust height on window resize
  useEffect(() => {
    const handleResize = () => adjustHeight()
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [adjustHeight])

return { textareaRef, adjustHeight }
}84:["$","$L8e",null,{"chatId":"ZieegMCaj92","children":["$","$L8f",null,{"data":{"@\"active-block\",\"ZieegMCaj92\",":{"id":"b_EoIIAJuazuT","messageId":"cz0KShW3SXr0WIiuWQMogQ8iuKnWd7zJ","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"ZieegMCaj92\",":false,"":null},"children":"$L91"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This